<template>
  <div>
    <div class="hmx-tab">
      <ZanTab v-bind="tab1" :componentId="'tab1'" @change="handleZanTabChange" />
      <ZanTab v-bind="tab2" :componentId="'tab2'" @change="handleZanTabChange" />
      <ZanTab v-bind="tab3" :componentId="'tab3'" @change="handleZanTabChange" />
    </div>

    <div class="hmx-rooms">

    </div>
  </div>
</template>

<script>
import ZanTab from "../../components/zan/tab";
export default {
  data() {
    return {
      tab1: {
        list: [
          {
            id: "1",
            title: "高新人才公寓"
          },
          {
            id: "2",
            title: "东方之珠"
          },
          {
            id: "3",
            title: "新楼盘1"
          },
          {
            id: "4",
            title: "新楼盘2"
          },
          {
            id: "5",
            title: "新楼盘3"
          },
          {
            id: "6",
            title: "新楼盘4"
          }
        ],
        selectedId: "1",
        scroll: true,
        height: 35
      },
      tab2: {
        list: [
          {
            id: "1",
            title: "1号楼"
          },
          {
            id: "2",
            title: "2号楼"
          },
          {
            id: "3",
            title: "3号楼"
          },
          {
            id: "4",
            title: "4号楼"
          },
          {
            id: "5",
            title: "5号楼"
          },
          {
            id: "6",
            title: "6号楼"
          }
        ],
        selectedId: "1",
        scroll: true,
        height: 35
      },
      tab3: {
        list: [
          {
            id: "1",
            title: "1单元"
          },
          {
            id: "2",
            title: "2单元"
          },
          {
            id: "3",
            title: "3单元"
          },
          {
            id: "4",
            title: "4单元"
          },
          {
            id: "5",
            title: "5单元"
          },
          {
            id: "6",
            title: "6单元"
          }
        ],
        selectedId: "1",
        scroll: true,
        height: 35
      }
    };
  },

  components: {
    ZanTab
  },

  methods: {
    ...ZanTab.methods,
    handleZanTabChange(e) {
      const { componentId, selectedId } = e;
      this[componentId].selectedId = selectedId;
    }
  },

  created() {}
};
</script>

<style>
.hmx-rooms {
  min-height: 120px;
}

page {
  background-color: #f2f2f2;
}
</style>
